<template>
    <div>
        <!-- 面包屑导航 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>商品管理</el-breadcrumb-item>
            <el-breadcrumb-item>商品分类</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 卡片视图区域 -->
        <el-card>
            <el-row>
                <el-col>
                    <el-button type="primary" @click="addCate">添加分类</el-button>
                </el-col>
            </el-row>
            <tree-table class="tree-table" :data='cateList' :columns="columns" :show-index='true' index-text="#" border :selection-type="false" :expand-type="false" >
                <!-- 是否有效 -->
                <template slot="isok" scope="scope">
                    <i class="el-icon-check" v-if="scope.row.type == 'true'" style="color:green"></i>
                    <i class="el-icon-close" v-else style="color:red"></i>
                </template>
                <!-- 排序 -->
                <template slot="order" scope="scope">
                   <el-tag size="mini" v-if="scope.row.order == '1'">一级</el-tag>
                   <el-tag size="mini" type="success" v-else-if="scope.row.order == '2'">二级</el-tag>
                   <el-tag size="mini" type="warning" v-else>三级</el-tag>
                </template>
                <!-- 操作 -->
                 <template slot="opt" scope="scope">
                    <el-button type="primary" size="mini" icon="el-icon-edit" @click="edit(scope.row)"></el-button>                                                                                                                                                                   
                    <el-button type="danger" size="mini" icon="el-icon-delete"></el-button>
                </template>
            </tree-table>

            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :page-sizes="[1, 5, 8, 10]"
                :page-size="1"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </el-card>
        <!-- 添加商品分类对话框 -->
        <el-dialog
            @close="addCateClose"
            title="添加分类"
            :visible.sync="addCateDialogVisible"
            width="50%">
            <el-form ref="addCateFormRef" :model="addCateForm" :rules="addCateRules" label-width="80px">
                <el-form-item label="分类名称" prop="catename">
                    <el-input v-model="addCateForm.catename" ></el-input>
                </el-form-item>
                <el-form-item label="父级分类">
                     <el-cascader
                        clearable 
                        expand-trigger="hover"
                        v-model="selectarr"
                        :options="cateList"
                        :props="expandCate"
                        @change="handleChange">
                    </el-cascader>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addCateDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="addCateDialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
export default {
    data() {
        return {
            cateList:[
                {cate_name:'大家电',type:'false',order:'1',children:[{cate_name:'彩电',order:'2',children:[{cate_name:'小米电视'},{cate_name:'彩虹电视'}]},{cate_name:'冰箱',},{cate_name:'洗衣机'}]},
                {cate_name:'热门推荐',type:'true',order:'1',children:[{cate_name:'彩电',order:'2',children:[{cate_name:'小米电视'},{cate_name:'彩虹电视'}]},{cate_name:'冰箱',},{cate_name:'洗衣机'}]},
                {cate_name:'海外购',type:'true',order:'1',children:[{cate_name:'彩电',order:'2',children:[{cate_name:'小米电视'},{cate_name:'彩虹电视'}]},{cate_name:'冰箱',},{cate_name:'洗衣机'}]},
                {cate_name:'京东热卖',type:'false',order:'1',children:[{cate_name:'彩电',order:'2',children:[{cate_name:'小米电视'},{cate_name:'彩虹电视'}]},{cate_name:'冰箱',},{cate_name:'洗衣机'}]},
                {cate_name:'并夕夕热卖',type:'false',order:'1',children:[{cate_name:'彩电',order:'2',children:[{cate_name:'小米电视'},{cate_name:'彩虹电视'}]},{cate_name:'冰箱',},{cate_name:'洗衣机'}]}
            ],
            pagenum:1,
            pagesize:5,
            total:5,
            columns:[
                {
                    label:'分类名称',
                    prop:'cate_name'  
                },
                {
                    label:'是否有效',
                    //表示当前列定义为模板列
                    type:'template',
                    //表示这一列使用的模板名称
                    template:'isok'
                },
                {
                    label:'排序',
                    type:'template',
                    template:'order'
                },
                {
                    label:'操作',
                    type:'template',
                    template:'opt'
                }
            ],
            addCateDialogVisible:false,
            addCateForm:{
                catename:'',
                catepid:'',
                catelecel:''
            },
            addCateRules: {
                catename:[
                    { required: true, message:'请输入分类名称', trigger: 'blur' },
                ]
            },
            parentList:[

            ], 
            expandCate: {
                value:'cate_name',
                label:'cate_name',
                children:'children'
            },
            selectarr:[],   
        }
    },
    created() {

    },
    methods : {
        handleSizeChange() {

        },
        handleCurrentChange() {

        },
        addCate() {
            this.addCateDialogVisible = true
        },
        handleChange() {
            console.log(this.selectarr)
        },
        addCateClose() {
            this.$refs.addCateFormRef.resetFields();
            this.selectarr = []
        },
        edit() {
            
        }
    }
}
</script>
<style lang="less" scoped>
.tree-table {
    margin-top:15px;
}

.el-cascader {
    width:100%;
}
</style>